/* 
购物车列表的功能
1.渲染列表 - 克隆
    - 直接将购物车列表设置一个结构，写好样式，隐藏起来。
    - 对隐藏的结构进行克隆
    - 优于渲染，结构比较复杂，可变的值比较少。
2.统计总的商品个数,总价。
3.全选按钮。
4.商品数量的改变。
5.删除单个和选中的商品。 
*/

! function randerlist() {
    // 1.渲染列表 - 克隆
    //获取所有商品的接口数据
    $.ajax({
        url: 'http://localhost/taobao/php/alldata.php',
        dataType: 'json'
    }).done(function(data) { //获取所有的接口数据，返回是数组
        //获取本地存储
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
            let arrsid = localStorage.getItem('localsid').split(','); //[1,2,4,3]
            let arrnum = localStorage.getItem('localnum').split(','); //[10,20,40,30]
            for (let i = 0; i < arrsid.length; i++) {
                //获取当前本地存储中的sid
                $.each(data, function(index, value) { //遍历数组。产生58个对象(value)。
                    if (arrsid[i] == value.sid) { //利用隐式转换(本地存储是字符串)
                        //克隆列表
                        let clonebox = $('.goods-item:hidden').clone(true); //克隆隐藏的元素
                        clonebox.attr('sid', value.sid);
                        clonebox.find('.goods-pic img').attr('src', value.url);
                        clonebox.find('.goods-d-info a').html(value.title);
                        clonebox.find('.b-price strong').html(value.price);
                        clonebox.find('.quantity-form input').val(arrnum[i]);
                        clonebox.find('.b-sum strong').html((value.price * arrnum[i]).toFixed(2)); //计算单个商品的总价
                        clonebox.css('display', 'block'); //显示
                        $('.item-list').append(clonebox); //追加
                        calc(); //统计总价和数量
                    }
                });
            }
        }
    });

    // 2.统计总的数量和总价
    // 购物车列表的复选框选中的状态下进行统计。
    // 购物车列表进行元素对象的遍历操作。
    // each(callback):实例方法，jq对象使用的，遍历元素对象的。
    // $.each(callback):工具方法，原生js和jq对象都可以使用，遍历数组和对象的。
    function calc() {
        let allcount = 0; //统计商品数量
        let allprice = 0; //统计总价
        $('.goods-item:visible').each(function(index, element) { //index:元素对象的索引，element:原生js的元素对象$(element)
            // $(this):当前的购物车列表元素.goods-item
            // 判断当前列表中的复选框是否勾选
            if ($(this).find('input:checkbox').prop('checked')) { //检测是否选中选中
                allcount += parseInt($(this).find('.quantity-form input').val());
                allprice += parseFloat($(this).find('.b-sum strong').html());
            }
        });
        $('.amount-sum em').html(allcount);
        $('.totalprice').html('￥' + allprice.toFixed(2));
    }


    // 3.全选按钮的操作
    // 3.1.全选按钮控制其他复选框
    $('.allsel').on('click', function() {
        $('.goods-item:visible').find('input:checkbox').prop('checked', $(this).prop('checked')); //将全选框的值赋值给购物车列表里面复选框。
        $('.allsel').prop('checked', $(this).prop('checked')); //另外一个全选框的值也要跟着改变。
        calc(); //统计总价和数量
    });

    // 3.2.购物车列表中的复选框控制全选
    // 购物车列表中的复选框的长度等于购物车列表中复选框选中的长度一致，表示可以全选。
    // 刻意采用事件委托。
    $('.item-list').on('click', '.cart-checkbox input', function() { //第二个参数，事件委托的元素，$(this)指向委托的元素
        let len1 = $('.goods-item:visible').find('input:checkbox').length; //购物车列表中的复选框的长度
        let len2 = $('.goods-item:visible').find('input:checked').length; //购物车列表中复选框选中的长度
        if (len1 === len2) {
            $('.allsel').prop('checked', true);
        } else {
            $('.allsel').prop('checked', false);
        }
        calc(); //统计总价和数量
    });

    // 4.数量改变
    // 小计发生改变，影响数量改变和总价的改变 - 封装总价和数量  封装小计的改变
    // 任何改变都会影响本地存储的改变 - 重新计算本地存储的值(通过数组追加和改变进行本地存储的设置)
    // 4.1.数量++
    $('.quantity-add').on('click', function() {
        let num = $(this).parents('.goods-item').find('.quantity-form input').val(); //通过当前的按钮找到父级，父级下面查找当前的值。
        num++;
        $(this).parents('.goods-item').find('.quantity-form input').val(num);
        $(this).parents('.goods-item').find('.b-sum strong').html(calcsingle($(this))); //调用函数得到结果进行赋值给对应的结构
        calc();
    });
    // 4.2.数量--
    $('.quantity-down').on('click', function() {
        let num = $(this).parents('.goods-item').find('.quantity-form input').val(); //通过当前的按钮找到父级，父级下面查找当前的值。
        num--;
        if (num < 1) {
            num = 1;
        }
        $(this).parents('.goods-item').find('.quantity-form input').val(num);
        $(this).parents('.goods-item').find('.b-sum strong').html(calcsingle($(this))); //调用函数得到结果进行赋值给对应的结构
        calc();
    });
    // 4.3.数量输入改变
    $('.quantity-form input').on('input', function() {
        let reg = /^\d+$/; //匹配一个或者多个数字
        if (!reg.test($(this).val())) { //输入的不是数字，将数量设为1
            $(this).val(1)
        }
        $(this).parents('.goods-item').find('.b-sum strong').html(calcsingle($(this))); //调用函数得到结果进行赋值给对应的结构
        calc();
        setlocalstorage($(this));
    });

    //封装重复的应用 - 计算单价
    function calcsingle(obj) {
        let single = parseFloat(obj.parents('.goods-item').find('.b-price strong').html()); //当前对应的单价
        let num = parseInt(obj.parents('.goods-item').find('.quantity-form input').val()); //数量
        return (single * num).toFixed(2);
    }

    //本地存储的封装
    //获取当前商品列表的sid，通过sid找到索引位置，将位置给存放数量的数组。
    function setlocalstorage(obj) {
        let arrsid = [];
        let arrnum = [];
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
            arrsid = localStorage.getItem('localsid').split(','); //[1,2,4,3]
            arrnum = localStorage.getItem('localnum').split(','); //[10,20,40,30]
        }
        //通过obj获取当前操作的商品列表的sid
        let sid = obj.parents('.goods-item').attr('sid');
        let index = arrsid.indexOf(sid); //获取sid存在的索引位置
        arrnum[index] = obj.parents('.goods-item').find('.quantity-form input').val(); //将数量覆盖对应的数组。
        localStorage.setItem('localnum', arrnum) //重新存储
    }

    // 5.删除单个和选中的商品。（删除结构和本地存储）
    // 5.1.删除单个商品列表
    $('.b-action a').on('click', function() {
        if (window.confirm('你确定要删除吗?')) {
            $(this).parents('.goods-item').remove();
            calc();
            delstorage($(this).parents('.goods-item').attr('sid'));
        }
    });

    // 5.2.删除多个选中的商品
    $('.operation a').on('click', function() {
        if (window.confirm('你确定要删除吗?')) { //满足才遍历删除
            $('.goods-item:visible').each(function(index, element) { //index:元素对象的索引，element:原生js的元素对象$(element)
                if ($(this).find('input:checkbox').prop('checked')) { //复选框是选中的
                    $(this).remove();
                    calc();
                    delstorage($(this).attr('sid'));
                }
            });
        }
    });

    //删除本地存储 - 删除本地存储里面的编号和数量
    //找到对应的删除的位置，数量和编号都可以删除
    //获取本地存储的编号和数量，将其转换成数组。
    function delstorage(sid) { //sid:编号
        let index = null; //sid存在月arrsid里面的索引位置
        let arrsid = [];
        let arrnum = [];
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
            arrsid = localStorage.getItem('localsid').split(','); //[1,2,4,3]
            arrnum = localStorage.getItem('localnum').split(','); //[10,20,40,30]
        }
        index = arrsid.indexOf(sid); //位置
        arrsid.splice(index, 1); //删除
        arrnum.splice(index, 1); //删除

        localStorage.setItem('localsid', arrsid) //重新存储编号
        localStorage.setItem('localnum', arrnum) //重新存储数量
    }
}();